<!-- 生成一个ip地址输入框，直接三位一分割 -->
<template>
  <ul
    class="ipAdress"
    :class="{
      'is-disabled': disabled,
    }"
  >
    <li v-for="(item, index) in ipAdress" :key="index">
      <input
        type="text"
        @input="checkIpVal($event, index)"
        @keyup="turnIpPOS($event, index)"
        :value="item.value"
        :disabled="disabled"
        :maxlength="3"
        ref="ipInput"
        @blur="setDefaultVal($event, index)"
      />
      <div></div>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: " . . . ",
      valiator: (val) => {
        // ip地址验证
        return /^(\d{1,3}\.){3}\d{1,3}$/.test(val);
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    ipAdress: {
      get() {
        if (!this.value) return Array(4).fill({ value: "" });
        const ipLists = this.value.split(".").map((it) => ({
          value: it,
        }));
        return ipLists;
      },
    },
  },
  methods: {
    checkIpVal(e, index) {
      let val = e.target.value;
      //确保每个值都处于0-255
      //当输入的是空格时，值赋为空
      if (typeof val === "string") {
        val = val.trim();
      }
      val = parseInt(val, 10);
      if (isNaN(val)) {
        val = "";
      } else {
        val = val < 0 ? 0 : val;
        val = val > 255 ? 255 : val;
      }
      this.ipAdress[index].value = val;

      this.$emit("input", this.ipAdress.map((v) => v.value).join("."));
    },
    turnIpPOS(event, index) {
      let self = this;
      let e = event || window.event;
      //左箭头向左跳转，左一不做任何措施
      if (e.keyCode == 37) {
        if (index != 0) {
          self.$refs.ipInput[index - 1].focus();
        }
      }
      //删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
      if (e.keyCode == 8) {
        if (index != 0 && !e.target.value) {
          self.$refs.ipInput[index - 1].focus();
          // }
        }
      }
      //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
      if (
        e.keyCode == 39 ||
        e.keyCode == 13 ||
        e.keyCode == 32 ||
        e.keyCode == 190
      ) {
        if (index != 3) {
          self.$refs.ipInput[index + 1].focus();
        }
      }
    },
    setDefaultVal(e, index) {
      //当input失去焦点，而ip没有赋值时，会自动赋值为0
      let val = e.target.value;
      if (val == "") {
        e.target.value = "0";
        this.ipAdress[index].value = "0";
        this.$emit("input", this.ipAdress.map((v) => v.value).join("."));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.has-error .ipAdress {
  border-color: #f5222d;
}
.ipAdress {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  width: 147px;
  height: 32px;
  padding: 4px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;

  &.is-disabled {
    background-color: #fff;
    color: #999;
    cursor: not-allowed;
    opacity: 1;

    input {
      border: none;
      background-color: transparent;
    }
  }
}
.ipAdress li {
  position: relative;
  height: 23px;
  margin: 0;
  width: 25%;
}
ul[class="ipAdress"] input[type="text"] {
  border: none;
  width: 100%;
  height: 23px;
  text-align: center;
  background: transparent;
  color: rgba(0, 0, 0, 0.65);
}
.ipAdress li div {
  position: absolute;
  bottom: 9px;
  right: 0;
  border-radius: 50%;
  background: #333;
  width: 2px;
  height: 2px;
}
/*只需要3个div*/
.ipAdress li:last-child div {
  display: none;
}
/*取消掉默认的input focus状态*/
.ipAdress input:focus {
  outline: none;
}
</style>
